<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../styles/prod.scss";
.mid {
  line-height: 140px;
}
.active {
  color: red;
}
.right-menu {
  top: 180px !important;
}
.el-checkbox {
  display: block;
  text-align: left;
  border: 1px solid #666;
  height: 40px;
  line-height: 40px;
  margin-left: 0;
  padding-left: 30px;
  margin-right: 30px;
}
.tac {
  text-align: center;
  padding: 0;
  background: #ccc;
}
.prod-item {
  vertical-align: top;
}
// .prod-img {
//   height: 142px !important;
// }
.prod-lable {
  height: 36px !important;
}
.prod-compaire .prod-img {
  height: 140px !important;
}
.name-limit{
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: 100%;
height: 100%;
}
.prod-compaire .lin3 {
    height: 80px !important;
    line-height: 1.8em;
    word-break: break-all;
    white-space: normal;
    text-overflow:ellipsis;
    padding: 5px;
    overflow: hidden;
}
.show-diff{
  // background: #f5fdf0 !important;
  background:yellow !important;
}
</style>
<template>
  <div class="app-container calendar-list-container">
    <div class="pds-tip-green">
      <p>选择产品小类：
        <el-cascader :options="productCategory" :props="{value:'id'}" placeholder="产品类别" v-model="filter.productCategoryCodeList" :disabled="compareList.length?true:false"></el-cascader>
        <el-input style="width: 260px;" class="filter-item" placeholder="请输入机型号" v-model="filter.plmModelNo">
        </el-input>
        <el-button class="filter-item" type="primary" icon="search" @click="compare()" size="small">添加对比</el-button>
      </p>
    </div>
    <el-row class="prod-compaire" v-if="compareList.length">
      <!-- 行名 -->
      <el-col :span="3">
        <div class="">
          <div class="prod-class">
            基本属性
          </div>
          <div class="prod-lable" v-for="(item,idx) in ['机型号','产品图片','产品名称','市场定位','经营模式','认证','上市年份','内盒类型','客户']" :key="idx" :class="{'mid prod-img':idx==1,}">
            {{item}}
          </div>
        </div>
        <div class="">
          <div class="prod-class">
            产品属性
          </div>
          <div class="prod-param-item" v-for="clas in getModuleMaxHeight" :key="clas.itemId">
            <div class="prod-lable prod-p">
              {{language=='en'?clas.itemNameEn:clas.itemNameCn}}
            </div>
            <div class="prod-lable prod-p" v-for="item in clas.paramsList" :key="item.paramId">
              {{language=='en'?item.paramNameEn:item.paramNameCn}}
            </div>
          </div>
        </div>
        <div class="">
          <div class="prod-class">
            产品特征
          </div>
          <div class="prod-future-l" :style="getFutureMaxHeight">
            特征
          </div>
        </div>
        <div class="">
          <div class="prod-class">
            产品附件
          </div>
          <div class="prod-future-l" :style="getAssetsMaxHeight">
            附件
          </div>
        </div>
      </el-col>
      <!-- 数据 -->
      <el-col :span="21">
        <div class="prod-list-scoll">
          <div class="prod-item" v-for="(prod,odx) in compareList" :key="odx">
            <!-- 基本属性 -->
            <div class="">
              <div class="prod-class">
                {{prod.pdsFileModelBaseDto.plmModelNo}}
                <i class="el-icon-close" @click="deleteItem(odx)"></i>
              </div>
              <div class="prod-lable" :class="{'prod-img':idx==1}" v-for="(item,idx) in ['plmModelNo','pdsFileModelPbsPicsList','name','marketPositionDv','bizModelDv','certValues','salesYear','innerCartonType','customerNames']" :key="item">
                <div v-if="idx!=1" class="name-limit" :class="{'show-diff':showDiff(item)}">{{prod.pdsFileModelBaseDto[item]||''}}</div>
                <img :src="baseImgUrl+prod.pdsFileModelPbsPicsList[0].url" alt="" v-if="idx==1" class="prod-img">
              </div>
            </div>
            <!-- 模块 -->
            <div class="">
              <div class="prod-class">
                {{prod.pdsFileModelBaseDto.plmModelNo}}
              </div>
              <div class="prod-param-item" v-for="(clas,odx) in prod.showModules" :key="clas.itemId">
                <div class="prod-lable prod-p prod-p-r">
                  {{language=='en'?clas.itemNameEn:clas.itemNameCn}}
                </div>
                <div class="prod-lable prod-p prod-p-r" v-for="(item,key) in clas.paramsList" :key="item.paramId" :class="{'show-diff':showDiffModule(key,odx)}">
                  <span v-if="item.paramTypeDv!='radio'&&item.paramTypeDv!='range'&&item.paramValue"> {{item.paramValue}}{{item.paramUnitDv}}</span>
                  <span v-if="item.paramTypeDv=='radio'">
                    <span v-if="item.paramValue==1">{{language=='en'?'Y':'是'}}</span>
                    <span v-else>{{language=='en'?'N':'否'}}</span>
                  </span>
                  <span v-if="item.paramTypeDv=='range'"> {{item.paramValue}}～{{item.paramMaxValue}}{{item.paramUnitDv}}</span>
                </div>
              </div>
            </div>
            <!-- 特征 -->
            <div class="prod-feature">
              <div class="prod-class">
                {{prod.pdsFileModelBaseDto.plmModelNo}}
              </div>
              <div class="prod-lable prod-p prod-p-r lin3" v-for="(item,index) in prod.showFeaturesList" :key="item.assetId" :class="{'show-diff':showDiffAssets(index,'showFeaturesList')}">
                {{language=='en'?item.nameEn:item.nameCn}}
              </div>
            </div>
            <!-- 附件 -->
            <div class="prod-feature">
              <div class="prod-class">
                {{prod.pdsFileModelBaseDto.plmModelNo}}
              </div>
              <div class="prod-lable prod-p prod-p-r lin1" v-for="(item,index) in prod.showAccessoriesList" :key="item.assetId" :class="{'show-diff':showDiffAssets(index,'showFeaturesList')}">
                {{language=='en'?item.nameEn:item.nameCn}}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>


<script>
import { mapGetters } from 'vuex';
import * as prodApi from '@/api/product/index';
import { modelCompare } from '@/api/product/model/add';
export default {
  name: 'user',
  components: {
    // 'depart-selector': () =>
    //   import ('./components/departSelector')
  },
  data() {
    return {
      loading: false,
      baseImgUrl: process.env.BASE_FILE_URL + '/',
      productCategory: [],
      filter: {
        productCategoryCodeList: [],
        plmModelNo: '',
        plmModelNoList: []
      },
      moduleMax: [],
      compareList: [],
      futureMaxList: [],
      mouduleHeight: []
    };
  },
  computed: {
    ...mapGetters(['elements', 'language']),
    getModuleMaxHeight() {
      let len = 0;

      this.compareList.map(row => {
        if (len < row.showModules.length) {
          this.moduleMax = row.showModules;
          len = this.moduleMax.length;
        }
      });
      this.mouduleHeight = this.moduleMax.length;
      this.moduleMax.map(moduleItem => {
        this.mouduleHeight += moduleItem.length;
      });
      console.log('this.mouduleHeight', this.mouduleHeight);
      return this.moduleMax;
    },
    getFutureMaxHeight() {
      let len = 0;
      this.compareList.map(row => {
        const listLen = row.showFeaturesList.length;
        const i = listLen - len;
        len = i > 0 ? listLen : len;
      });
      this.compareList.map(row => {
        let i = row.showFeaturesList.length - len;
        while (i < 0) {
          row.showFeaturesList.push({});
          i++;
        }
      });
      return `height:${len * 80}px;line-height:${len * 80}px`;
    },
    getAssetsMaxHeight() {
      let len = 0;
      this.compareList.map(row => {
        const listLen = row.showAccessoriesList.length;
        const i = listLen - len;
        len = i > 0 ? listLen : len;
      });
      this.compareList.map(row => {
        let i = row.showAccessoriesList.length - len;
        while (i < 0) {
          row.showAccessoriesList.push({});
          i++;
        }
      });
      return `height:${len * 40}px;line-height:${len * 40}px`;
    },
    showDiff() {
      return (name, type) => {
        let result = false
        type = type || 'pdsFileModelBaseDto'
        if (this.compareList.length >= 2) {
          const data = this.compareList[0][type][name]
          this.compareList.map(prod => {
            if (prod[type][name] !== data) {
              result = true
            }
          })
        }
        return result
      }
    },
    showDiffModule() {
      return (paramIdx, moduleIdx) => {
        // 比较模组数量不一致时导致出错
        let result = false
        if (this.compareList.length >= 2) {
          let data
          if (!this.compareList[0].showModules[moduleIdx]) {
            data = undefined
          } else {
            data = this.compareList[0].showModules[moduleIdx].paramsList[paramIdx].paramValue
          }
          this.compareList.map(prod => {
            console.log(moduleIdx, paramIdx)
            if (prod.showModules[moduleIdx] && prod.showModules[moduleIdx].paramsList[paramIdx].paramValue !== data) {
              result = true
            }
          })
        }
        return result
      }
    },
    showDiffAssets() {
      return (index, type) => {
        let result = false
        if (this.compareList.length >= 2) {
          const data = this.compareList[0][type][index].assetId
          this.compareList.map(prod => {
            if (prod[type][index].assetId !== data) {
              result = true
            }
          })
        }
        return result
      }
    }
  },
  created() {
    this.getPdsConfCategoryTree();
  },
  methods: {
    getPdsConfCategoryTree() {
      prodApi.getPdsConfCategoryTree().then(res => {
        console.log('getPdsConfCategoryTree', res);
        this.productCategory = res.data;
      });
    },
    deleteItem(index) {
      this.compareList.splice(index, 1);
      this.filter.plmModelNoList.splice(index, 1);
    },
    compare() {
      if (this.filter.productCategoryCodeList.length !== 3) {
        this.$message.error('请选择产品小类');
        return;
      }
      if (this.filter.plmModelNo === '' || !this.filter.plmModelNo) {
        this.$message.error('请输入型号');
        return;
      }
      if (this.filter.plmModelNoList.length >= 8) {
        this.$message.error('对比数限制8 个');
        return;
      }
      if (
        this.compareList.filter(
          prod => prod.pdsFileModelBaseDto.plmModelNo === this.filter.plmModelNo
        ).length
      ) {
        this.$message.error('此型号已添加！');
        return;
      }
      if (this.loading) {
        return;
      }
      this.filter.productCategoryId = this.filter.productCategoryCodeList[2];
      this.filter.plmModelNoList.push(this.filter.plmModelNo);
      const serverCompare = () => {
        this.loading = true;
        modelCompare(this.filter).then(res => {
          this.loading = false;
          if (res.code != 200) {
            this.$message.error(res.message);
            this.filter.plmModelNoList.pop()
          } else {
            if (res.data.length > this.compareList.length) {
              this.filter.plmModelNo =
                res.data[res.data.length - 1].pdsFileModelBaseDto.plmModelNo;
            }
            this.compareList = res.data;
            // this.compareList[0].showFeaturesList = this.components[0].showAccessoriesList
            console.log('this.compareList', this.compareList);
          }
        });
      };
      serverCompare();
    }
  }
};
</script>
